// 引入sme-router
import SMERouter from 'sme-router'
import moment from 'moment'

// 引入ejs模板
import login from 'v/login'
import home from 'v/index'
import adminList from 'v/adminList'
import advList from 'v/advList'
// console.log(login) //login是一个函数
// console.log(login({ name: 'zs', age: 18 })) // login的返回值就是login.ejs中html字符串

// 引入发送请求的函数
import {
  getAdmins,
  login as loginHandle,
  verifyToken,
  logoutHandle,
} from './api'

// 引入操作token的对象
import t from './utils/localToken'

// 创建路由对象
// sme-router默认使用hash模式
// 第二个参数传入html5,则切换为history模式
// history和hash模式的区别:
// history修改的是路径,看的也是路径
// hash修改的是哈希值,看的也是hash值
const router = new SMERouter('root', 'html5')

// 添加router到全局
window.router = router

// 配置前端路由的代码
router.route('/login', (req, res) => {
  //当浏览器地址栏的path变成了/login的时候,这个函数就会调用
  res.render(login())
  // 注意: 如果要获取登录页面中的元素,一定要在render之后获取.因为render之后登录的结构才渲染到页面上
  const btn = document.getElementById('btn')
  // 获取用户名和密码的元素
  const username = document.getElementById('username')
  const password = document.getElementById('password')

  // 给登录按钮绑定事件
  btn.onclick = async function (e) {
    e.preventDefault()

    const un = username.value.trim()
    const psw = password.value.trim()

    // 如果用户名或密码有一个没写,就提示用户然后不发送请求.
    if (un && psw) {
      //发送请求
      const result = await loginHandle(un, psw)
      if (result.code === 2) {
        //登录成功了
        // 先把token存起来
        t.setToken(result.data)
        // 提示用户成功了
        toastr.success(result.message)
        // 跳转到首页
        res.redirect('/home')
      } else {
        // 登录失败了
        toastr.error(result.message)
      }
    } else {
      // 提示用户
      toastr.error('用户名或密码错误')
    }
  }
})
router.route('/home', async (req, res, next) => {
  const result = await verifyToken()
  if (result.code !== 2) {
    // 重定向到login页面
    res.redirect('/login')
    // 提示用户
    toastr.error(result.message)
    // 后面的代码就不要执行了
    return
  }

  //当浏览器地址栏的path变成了/login的时候,这个函数就会调用
  // res.render(home())
  //改成下面的写法:
  // 作用: 再渲染二级路由的时候,要保证一级路由也可以正常渲染
  next(
    home({
      // 将渲染二级路由视图的标签传入到首页的模板中
      subRoute: res.subRoute(), // subRoute:'<div id="__sub-route-view"></div>'

      url: req.url, //req.url返回当前浏览器地址栏的路径. 和location.pathname一样
    })
  )

  //获取退出登录的按钮
  const logout = document.getElementById('logout')
  logout.onclick = async function () {
    //发送请求,先让服务器删除token
    // 服务器删除成功之后,让浏览器删除token
    const result = await logoutHandle()
    if (result.code === 2) {
      //服务器删除token成功了
      // 提示用户
      toastr.success(result.message)
      //删除token
      t.rToken()
      // 重定向到登录页
      res.redirect('/login')
    } else {
      // 提示用户
      toastr.error('网络错误,退出失败')
    }
  }
})

// 1. 嵌套路由的路径要求: 路径必须以父级路由的路径开头
// 2. 去webpack.prod.js中 配置publicPath: '/' 解决获取不到build.js的问题
// 3. 去home的路由规则中中把res.render(home()) 改成 next(home())
// 4. next(home()) 改成  next(home({subRoute: res.subRoute()}))
// 5. 去index.ejs 中 添加代码 <%= data.subRoute %>
router.route('/home/admin', async (req, res) => {
  const result1 = await verifyToken()
  if (result1.code !== 2) {
    // 重定向到login页面
    res.redirect('/login')
    // 提示用户
    toastr.error(result1.message)
    // 后面的代码就不要执行了
    return
  }
  // 只要用户打开管理员页面,就发送请求获取数据
  // 注意: 如果要使用代理给服务器发送请求,写路径一般只写相对路径.这样浏览器会自动将当前页面的协议,域名端口号拼接在我们的路径前面,就可以直接把请求发送给开发服务器
  const result = await getAdmins()
  if (result.code === 2) {
    // 遍历数据,将数据中的登录时间和注册时间进行格式化处理
    result.data.forEach((item) => {
      item.last_login = moment(item.last_login).format('YYYY-MM-DD h:mm:ss')
      item.registe_date = moment(item.registe_date).format('YYYY-MM-DD h:mm:ss')
    })
    res.render(adminList(result.data))
  } else {
    // alert('获取管理员数据失败,请稍后再试')
    alert(result.message)
  }
})
router.route('/home/adv', async (req, res) => {
  const result1 = await verifyToken()
  if (result1.code !== 2) {
    // 重定向到login页面
    res.redirect('/login')
    // 提示用户
    toastr.error(result1.message)
    // 后面的代码就不要执行了
    return
  }
  res.render(advList())
})
// 当路径为没有定义的路由路径时,则重定向回到登录页面
router.route('*', (req, res) => {
  res.redirect('/login')
})

// 测试代码
// import moment from 'moment'

// console.log(moment('2023-04-27T00:28:25.832Z').format('YYYY-MM-D, h:mm:ss'))
